<template>
  <div>
    <van-tabbar
      id="button-nav"
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#000"
      route
    >
      <van-tabbar-item to="/shou" class="size"
        ><div class="iconfont icon-biaoqiankuozhan_shouye-116"></div>
        首页</van-tabbar-item
      >
      <van-tabbar-item to="/zhuan" class="size"
        ><div class="iconfont icon-icon_xinyong_xianxing_jijin-"></div>
        专题</van-tabbar-item
      >
      <van-tabbar-item to="/fen" class="size"
        ><div class="iconfont icon-shangpinliebiao"></div>
        分类</van-tabbar-item
      >
      <van-tabbar-item to="/gou" class="size"
        ><div class="iconfont icon-gouwuche"></div>
        购物车</van-tabbar-item
      >
      <van-tabbar-item to="/wo" class="size"
        ><div class="iconfont icon-zhanghao"></div>
        我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style scoped>
#button-nav {
  height: 80px;
}
.iconfont {
  font-size: 26px;
  line-height: 40px;
  text-align: center;
}
.size {
  font-size: 16px;
}
</style>